<template>
  <div class="box">
    <div
      style="
        width: 100%;
        height: 80px;
        line-height: 80px;
        font-weight: bold;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <img
        @click="back"
        style="width: 50px; margin-right: 10px;margin-top:20px; height: 50px"
        src="../../assets/guahao_img/leftBack.png"
        alt=""
        class="yy-img"
      />
      <span
        style="
          font-size: 50px;
          position: fixed;
          height:100px;
          top: 0;
          width: 100%;
          background-color: white;
          z-index: 10;
          text-align: center;
          font-weight: 600;
          margin-top:20px;
        "
        >网上预约挂号_在线咨询医生_就...</span
      >
      <img
        style="width: 50px; margin-right: 10px; height: 50px"
        src="../../assets/guahao_img/fenxiang.png"
        alt=""
      />
    </div>
    <div
      style="
        display: flex;
        /* background-color: #68d0af; */
        height: 200px;
        align-items: center;
        position: relative;
        top:10px;
        z-index: 1;
        padding: 0 20px;
        margin-top:20px;
      "
    >
      <div style="width: 300px;">

        <select
        style="
          font-size: 50px;
          color: #ddfff5;
          border: none;
          cursor: none;
          height: 50px;
          background: none;
          outline: none;
          padding: 0 5px;
          margin: 0 10px;
        "
      >
        <option style="font-size: 16px; color: #000">广州市</option>
        <option style="font-size: 16px; color: #000">北京市</option>
        <option style="font-size: 16px; color: #000">武汉市</option>

      </select>
      <van-icon name="arrow-down" color="#fff" />
      </div>
      <div
        style="
          display: flex;
          flex: 1;
          align-items: center;
          background-color: white;
          height: 100px;
          border-radius: 50px;
          margin: 0 10px;
        "
        class="select-inp"
      >
        <img
          src="../../assets/guahao_img/headSeach.png"
          style="width: 70px; height: 70px; margin-left: 15px;"
          alt=""
        />
        <input
          type="text"
          class="inp"
          placeholder="搜索医院、科室、医生"
          style="
            flex: 1;
            height: 70px;
            border: none;
            color: #9c9c9c;
            border-radius: 30px;
            padding-top: 10px;
            outline: none;
            padding:10px
          "
        />
      </div>
    </div>
    <div class="head_content">
      <div class="head">
        <ul>
          <li>
            <img src="../../assets/guahao_img/shield.png" alt="" />
            <span>官方号源</span>
          </li>
          <li>
            <img src="../../assets/guahao_img/shield.png" alt="" />
            <span>医生本人</span>
          </li>
          <li>
            <img src="../../assets/guahao_img/shield.png" alt="" />
            <span>平台认证</span>
          </li>
          <li>
            <img src="../../assets/guahao_img/shield.png" alt="" />
            <span>诊前退款</span>
          </li>
        </ul>
      </div>
      <div class="center">
        <dl>
          <dt><img src="../../assets/guahao_img/按医院.png" alt="" /></dt>
          <dd style="font-size: 45px; font-weight: bold">按医院</dd>
          <dd style="font-size: 33px; color: #9f9f9f">全国知名医院</dd>
        </dl>
        <dl>
          <dt><img src="../../assets/guahao_img/按科室.png" alt="" /></dt>
          <dd style="font-size: 45px; font-weight: bold">按科室</dd>
          <dd style="font-size: 33px; color: #9f9f9f">按科室挂号</dd>
        </dl>
        <dl>
          <dt><img src="../../assets/guahao_img/按医生.png" alt="" /></dt>
          <dd style="font-size: 45px; font-weight: bold">按医生</dd>
          <dd style="font-size: 33px; color: #9f9f9f">全国知名专家</dd>
        </dl>
      </div>
      <div class="footer">
        <dl>
          <dt>
            <img src="../../assets/guahao_img/1_07.png" alt="" />
          </dt>
          <dd>内科</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/guahao_img/2_03.png" alt="" />
          </dt>
          <dd>外科</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/guahao_img/3_03.png" alt="" />
          </dt>
          <dd>皮肤科</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/guahao_img/4_03.png" alt="" />
          </dt>
          <dd>男科</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/guahao_img/5_03.png" alt="" />
          </dt>
          <dd>妇产科</dd>
        </dl>
      </div>
    </div>
    <div class="centerBom">
      <div style="display: flex; align-items: center">
        <img
          src="../../assets/guahao_img/日历.png"
          style="width: 50px; height: 50px; margin: 0 20px 0 50px"
          alt=""
        />
        <p style="font-size: 50px; font-weight: bold;color:#242424;">我的挂号</p>
      </div>
      <div style="margin-right: 50px; font-size: 40px; color: #9c9c9c; display: inline-block">
        查看记录 >
      </div>
    </div>
    <div class="footerBox">
      <div
        style="
          display: flex;
          margin-bottom: 100px;
          padding-top:50px;
          align-items: center;
          height: 80px;
          justify-content: space-between;
        "
      >
        <p style="margin: 50px; font-size: 50px; font-weight: bold;color:#242424;">热门医院</p>
        <span style="margin-right: 50px; color: #9c9c9c; font-size: 40px">更多 ></span>
      </div>
      <div class="listContent">
        <div
          v-for="(item, ind) in listData"
          :key="ind"
          style="border-bottom: 1px solid #eee; margin-bottom: 7px"
          @click="toDetail(item)"
        >
          <dl class="content">
            <dt>
              <img
                :src="item.img"
                style="width: 103px; height: 103px; border-radius: 10px; margin-top: 5px"
                alt=""
              />
            </dt>
            <div style="display: flex; width: 100%; flex-direction: column; margin-left: 5px">
              <dd>
                <h4 style="line-height: 55px; font-size: 45px">{{ item.hospital }}</h4>
              </dd>
              <dd
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 2px 0;
                "
              >
                <div class="two_content" style="display: flex">
                  <p>公立</p>
                  <p>三级甲等</p>
                </div>
                <div style="color: #a4a4a4; font-size: 35px; margin-right: 30px">
                  >{{ item.distance }}km
                </div>
              </dd>
              <dd style="margin-top: 5px; font-size: 28px; margin-bottom: 10px; color: #6e6e6e">
                <div style="display: flex; line-height: 40px">
                  <p>科室:&ensp;</p>
                  <div style="width: 480px; text-overflow: ellipsis; overflow: hidden;margin-bottom:20px;">
                    &nbsp;{{ item.brief }}
                  </div>
                </div>
                <div style="display: flex; line-height: 40px">
                  <p>地址:&ensp;</p>
                  <div style="width: 480px; text-overflow: ellipsis; overflow: hidden">
                    &nbsp;{{ item.brief }}
                  </div>
                </div>
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <!-- 头部 -->
</template>
<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import router from '@/router'
const listData = ref<any>([])
const getList = async () => {
  await axios.get('/api/registration').then((res) => {
    console.log(res)
    listData.value = res.data.data
  })
}

const toDetail = (item: any) => {
  // router.push({ path: '/guaDetail', query: { id: item.id } })
  console.log(item)
}
getList()

const back = () => {
  router.push('/home')
}
</script>
<style lang="scss">
* {
  font-size: 25px;
}
.yy-img{
  position: fixed;
  z-index: 9999;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select {
    background-image: url('../../img/下拉.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 50px 50px; /* 调整为你的图标大小 */
}

.box {
  width: 100%;
  height: 1334px;
  overflow: hidden;
  overflow: auto;
  background-image: linear-gradient(to bottom, #68d0af 20%, #f5f5f5 70%);
}

.inp::placeholder {
  font-size: 23px;

}

.head_content {
  position: relative;
  width: 95%;
  margin: 0 auto;
  height: 400px;
  border-radius: 15px;
  z-index: 2;
  background-color: #ffffff;
  box-sizing: border-box;
  margin-bottom: 20px;

  .head {
    height: 65px;
    background-color: #fbf9fc;
    border-radius: 15px 15px 0 0;

    ul {
      display: flex;
      font-size: 26px;
      align-items: center;
      justify-content: space-around;
      line-height: 65px;
      color: #a7a5a8;

      li {
        display: flex;
        align-items: center;
      }

      img {
        margin: 0 2px;
        width: 26px;
        height: 26px;
      }
    }
  }

  .center {
    margin-top: 15px;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    img {
      width: 100px;
      height: 100px;
    }

    dl {
      display: flex;
      flex-direction: column;
      align-items: center;

      dl:nth-child(1) {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

// .hr{
//   margin: 20px;
// }

  .footer {
    display: flex;
    margin-top: 5px;
    align-items: center;
    justify-content: space-around;

    img {
      width: 55px;
      height: 55px;
    }

    dl {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 26px;
    }
  }
}

.centerBom {
  width: 95%;
  display: flex;
  align-items: center;
  height: 80px;
  background-color: #ffffff;
  margin: auto;
  border-radius: 15px;
  justify-content: space-between;
}

.footerBox {
  width: 95%;
  border-radius: 15px 15px 0 0;
  margin-top: 20px;
  margin-left: 2.5%;
  background-color: #fff;
}

.listContent {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  .content {
    height: 200px;
    margin-bottom: 20px;
    display: flex;
    border-bottom: 1px solid #ccc;

    dt {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 15%;
      height: 125px;
      margin-right: 4px;
    }
  }
}

.two_content {
  p {
    padding: 1px 4px;
    // margin: 0 3px;
    font-size: 24px;
    color: #6eb69e;
    border: 2px solid #6eb69e;
    border-radius: 5px;
    line-height: 30px;
    margin: 15px 5px 15px 5px;
  }
}
</style>
